<!DOCTYPE html>
<html>
<head>
	<title>商户列表</title>
	<!--#include("../common/common-link.html"){}-->
	<script src="${ctx}/assets/js/qrcode.min.js"></script>
	<style type="text/css">
		.layui-form-switch{margin-top: 0;}
		.table-panel .conditions .col .input-group{width:320px;}
		.table-panel .conditions .col .type-input-group{width:160px;}
		.table-panel .conditions .col .type-input-group .addon{background-color: #5cb85c;border-color: #4cae4c;color: #fff;}
		.table-panel .conditions .col .type-input-group .type-input-group-btn{width:90px;}
		.table-panel .conditions .col .type-input-group .type-input-group-btn .btn-success{border-left-color: #2cae4c}
		.table-panel .conditions .col .status{width:103px;}
		.table-panel .conditions .col .ok-btn{width:90px;}
		.table-panel .table-content .auth-btn{height: 26px;line-height: 16px;}
		.table-panel .table-content .operation .btn{width:89px;}
		.detail-div{padding:10px 0;}
		.detail-row{text-align: center;height: 29px;line-height: 29px;}
		.detail-row .col{display: inline-block;}
		.detail-row .col-l{font-size: 16px;width:90px;text-align:right;}
		.detail-row .col-r{font-size: 14px;color:#555;width:210px;text-align:left;}
		#alipay-auth-qrcode{text-align: center;display: none}
		#alipay-auth-qrcode .qrcode-img{padding: 30px;}
	</style>
</head>
<body>
	<div id="container-wrap" style="display:none;">
		<div class="table-panel">
			<div class="header">
				<h4 class="title">条件筛选</h4>
			</div>
			<div class="conditions">
				<div class="col">
					<div class="input-group">
						<span class="input-group-addon addon">名&emsp;称</span>
						<input type="text" class="form-control" :value="form.name" v-model="form.name">
	  				</div>
				</div>
				<div class="col">
					<div class="input-group">
						<span class="input-group-addon addon">手机号</span>
						<input type="text" class="form-control" :value="form.phone" v-model="form.phone">
	  				</div>
				</div>
				<div class="col">
					<div class="input-group" style="width:366px">
						<span class="input-group-addon addon">邮&emsp;箱</span>
						<input type="text" class="form-control" :value="form.email" v-model="form.email">
	  				</div>
				</div><br>
				<div class="col" style="margin-right:0;">
					<div class="input-group time">
						<span class="input-group-addon">创建开始时间</span>
						<input type="text" id="begin_create_time" class="form-control" readonly :value="form.beginCreateTime" v-model="form.beginCreateTime">
	  				</div>
				</div>
				<div class="col" style="margin-right:0;height:33px;line-height: 33px;">-</div>
				<div class="col">
					<div class="input-group time">
						<span class="input-group-addon">创建结束时间</span>
						<input type="text" id="end_create_time" class="form-control" readonly :value="form.endCreateTime" v-model="form.endCreateTime">
	  				</div>
				</div>
				<div class="col">
					<div class="input-group type-input-group">
						<span class="input-group-addon addon">商户状态</span>
						<div class="input-group-btn type-input-group-btn">
							<button type="button" class="status btn btn-success dropdown-toggle" data-toggle="dropdown">
								<span class="type-txt">{{statusTxt}}&nbsp;&nbsp;</span><span class="caret"></span>
							</button>
							<ul class="dropdown-menu dropdown-menu-right">
								<li><a href="javascript:void(0)" @click="statusSelect(-1)">全部</a></li>
								<li><a href="javascript:void(0)" @click="statusSelect(1)">活动</a></li>
								<li><a href="javascript:void(0)" @click="statusSelect(0)">冻结</a></li>
							</ul>
						</div>
					</div>
				</div><br>
				<div class="col" style="margin-right:0;">
					<div class="input-group time">
						<span class="input-group-addon">过期开始时间</span>
						<input type="text" id="begin_expire_time" class="form-control" readonly :value="form.beginExpireTime" v-model="form.beginExpireTime">
	  				</div>
				</div>
				<div class="col" style="margin-right:0;height:33px;line-height: 33px;">-</div>
				<div class="col">
					<div class="input-group time">
						<span class="input-group-addon">过期结束时间</span>
						<input type="text" id="end_expire_time" class="form-control" readonly :value="form.endExpireTime" v-model="form.endExpireTime">
	  				</div>
				</div>
				<div class="col">
					<input class="btn button ok-btn" type="button" value="查&emsp;询" @click="query">
					<input class="btn button reset-btn" type="button" value="重&emsp;置" @click="reset">
				</div>
			</div>
			<div class="header">
				<h4 class="title">商户列表</h4>
				<div class="btns-group">
					<input type="button" class="btn btn-primary addBtn" @click="add" value="添加商户"/>
				</div>
			</div>
			<div class="content">
				<table class="table-content">
					<tr>
						<th width="3%">序号</th>
						<th width="12%">名称</th>
						<th width="8%">手机号</th>
						<th width="15%">邮箱</th>
						<th width="6%">状态</th>
						<th width="8%">支付宝授权</th>
						<th width="12%">创建时间</th>
						<th width="12%">过期时间</th>
						<th width="24%">操作</th>
					</tr>
					<template v-if="companys&&companys.length>0">
						<tr v-for="(company,index) in companys">
							<td>{{index+1}}</td>
							<td>{{company.name}}</td>
							<td>{{company.phone}}</td>
							<td>{{company.email}}</td>
							<td>
								<div class="layui-form" v-if="company.status">
							  		<div :id="'switch'+index" class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch" :data-index="index"><em>活动</em><i></i></div>
							  	</div>
							  	<div class="layui-form" v-else>
							  		<div :id="'switch'+index" class="layui-unselect layui-form-switch" lay-skin="_switch" :data-index="index"><em>冻结</em><i></i></div>
							  	</div>
							</td>
							<td>
								<span v-if="company.alipayStatus == -1">无</span>
								<span v-else-if="company.alipayStatus == 1">已通过</span>
								<span v-else-if="company.alipayStatus == 0">
									<input class="btn btn-success btn-sm auth-btn" type="button" value="授权" @click="grantAuth(company.id)">
								</span>
							</td>
							<td>{{company.createTime}}</td>
							<td>{{company.expireTime}}</td>
							<td class="operation">
								<div class="btn-group">
									<input class="btn btn-warning btn-sm" type="button" value="修&emsp;改" @click="modify(company.id)">
									<input class="btn btn-success btn-sm" type="button" value="查看详情" @click="detail(company.id)">
									<input class="btn btn-primary btn-sm" type="button" value="添加聚合码" @click="addPaycode(company.id)">
								</div>
							</td>
						</tr>
					</template>
					<template v-else>
						<tr>
							<td colspan="8">没有商户列表</td>
						</tr>
					</template>
				</table>
			</div>
		</div>
		<div id="page"></div>
		<div id="alipay-auth-qrcode"><div class="qrcode-img"></div></div>
	</div>
</body>
<script type="text/javascript">
	var data = {};
	var form = {};
	function initVue() {
		data.form = form;
		form.phone = "";
		form.name = "";
		form.email = "";
		form.beginCreateTime = "";
		form.endCreateTime = "";
		form.beginExpireTime = "";
		form.endExpireTime = "";
		form.status = "";
		form.pageSize=10;
		data.statusTxt = "全部";
		data.company={};
		data.companys=[];
		new Vue({
			el:"#container-wrap",
			data:data
		});
		request();
		Vue.nextTick(function() {
			bindEvent();
			$("#container-wrap").show();
		});
	};
	function query(){
		resetQuery();
		request();
	};
	function request() {
		var load_id = util.load();
		util.syncPost({
			url:"/company/list",
			data:form,
			success : function(result) {
				$.extend(data, result);
				Vue.nextTick(function() {
					bindSwitch();
					page();
				});
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	};
	function add(){
		window.location.href="add";
	};
	function modify(id){
		window.location.href="modify?id="+id;
	};
	function detail(id) {
		window.location.href="detail?id="+id;
	};
	function statusSelect(status) {
		if (status == '-1') {
			data.statusTxt = "全部";
			data.form.status = "";
		} else if (status == '1') {
			data.statusTxt = "活动";
			data.form.status = status;
		} else if (status == '0') {
			data.statusTxt = "冻结";
			data.form.status = status;
		}
	};
	function page() {
		util.laypage({
			elem : 'page',
			count : data.totalRecord,
			limit : form.pageSize,
			curr : form.currentPageIndex,
			jump : function(obj, first) {
				form.currentPageIndex = obj.curr;
				if (!first) {
					form.pageSize=obj.limit;
					request();
				}
			}
		});
	};
	function reset() {
		util.reset(form);
		data.statusTxt = "全部";
	};
	function resetQuery(){
		form.currentPageIndex=1;
	};
	function bindEvent(){
		util.laydate({
			elem : '#begin_create_time',
			done: function(time, date, endDate){
				form.beginCreateTime = time;
			  }
		});
		util.laydate({
			elem : '#end_create_time',
			done: function(time, date, endDate){
				form.endCreateTime = time;
			  }
		});
		util.laydate({
			elem : '#begin_expire_time',
			done: function(time, date, endDate){
				form.beginExpireTime = time;
			  }
		});
		util.laydate({
			elem : '#end_expire_time',
			done: function(time, date, endDate){
				form.endExpireTime = time;
			  }
		});
		  
	};
	function bindSwitch(){
		var companys=data.companys;
		for(var i in companys){
			var company=companys[i];
			$("#switch"+i).click(processSwitch);
		}
	};
	function processSwitch(event){
		var target=event.currentTarget;
		var $target=$(target);
		var dataset=target.dataset;
    	var index=dataset.index;
    	var company=data.companys[index];
    	var id=company.id;
    	var state=company.status;
    	if(!state){
    		company.status=1;
    		util.confirm("确认修改为活动状态？",function(){
    			modifyStatus(index,id,1);
    		},function(){
    			company.status=0;
    		});
    	}else{
    		company.status=0;
    		util.confirm("确认冻结该用户？",function(){
    			modifyStatus(index,id,0);
    		},function(){
    			company.status=1;
    		});
    	}
	};
	function modifyStatus(index, id, status) {
		var _form = {};
		_form.id = id;
		_form.status = status;
		var load_id = util.load();
		util.post({
			url : "/company/modifyStatus",
			data : _form,
			success : function(result) {
				layer.close(load_id);
				var company = data.companys[index];
				company.status = status;
				layer.msg('操作成功', {icon:1,time:1000});
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	};
	function grantAuth(id){
		var url="https://openauth.alipay.com/oauth2/appToAppAuth.htm?app_id=2019062565663045&redirect_uri=";
		var callback_url="https://pay.yanlight.com/trade/alipay/providerSignGrant?";
		var load_id = util.load();
		util.post({
			url : "/alipay/getPid",
			data : {companyId:id},
			success : function(result) {
				layer.close(load_id);
				callback_url+="cid="+id+"&pid="+result.pid;
				callback_url=encodeURIComponent(callback_url);
				var auth_url=url+callback_url;
				console.info(auth_url);
				openAlipayQrcode(auth_url);
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	};
	function openAlipayQrcode(url){
		var $div = $("#alipay-auth-qrcode");
		var $qrimg = $("#alipay-auth-qrcode .qrcode-img");
		$qrimg.html("").qrcode({
		    text: url
		});
		layer.open({
			type : 1,
			shift : 2,
			closeBtn : 1,
			area : [ '320px', '316px' ],
			title : "特约商户支付宝授权",
			content : $div
		});
	};
	function addPaycode(id){
		util.confirm("确认增添新的聚合码？",function(){
			var load_id = util.load();
			util.post({
				url : "/company/addPaycode",
				data : {id:id},
				success : function(result) {
					layer.close(load_id);
					layer.msg('操作成功', {icon:1,time:1000});
				},
				complete : function() {
					layer.close(load_id);
				}
			});
		});
	};
	function initialize(){
		layui.use(['laydate','laypage'], function(){
			laydate = layui.laydate;
			laypage = layui.laypage;
			initVue();
		});
	};
</script>
</html>